<template>
  <div class="hot">
    <h1>This is an about page</h1>
    我是通过映射book中的getters过来的{{ listCount }}
  </div>
</template>
<script>
// 解构赋值拿到vuex中的方法mapState, mapMutations
// mapState可以将vuex中的State数据映射到computed计算属性中使用
// mapMutations可以将vuex中的mutations中的方法映射到当前组件的methods中
// mapActions可以将vuex中的actions映射到当前组件methods
// mapGetters 可以把vuex中的getters映射到当前组件computed中
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  // 组件创建完成时，调用一下methods的lde方法(从books模块下映射过来的)
  created() {
    this.lde() // 执行后会加载
  },
  // 将vuex中的book模块中的current映射过来，放在c名下
  computed: {
    // 写法一
    // 三个点是扩展运算符  var a = [1,2,3]  var b = [...a]  console.log(b) // [1,2,3]
    ...mapState('book', {
      c: 'current',
      l: 'list'
      // 初始是空数组，执行this.lde()在book模块的 loadDataEnd更新数据
    }),
    // c的属性值current就是books中的current的值相当于
    // c: {
    //   title: '',
    //   desc: '',
    //   author: '',
    //   coverImg: ''
    // }
    // 写法二
    // ...mapState('book', ['current', 'list'])
    // 区别：写成对象时可以起一个自己定义的属性名

    // 映射books中getters里的listCount,映射之后
    ...mapGetters('book', ['listCount'])
  },
  methods: {
    // 将vuex中books模块下mutations中的方法loadDataEnd和loadOneEnd映射到methods中
    // 写法一
    // ...mapMutations('book', ['loadDataEnd', 'loadOneEnd'])
    // 写法二
    ...mapMutations('book', {
      lde: 'loadDataEnd',
      loe: 'loadOneEnd'
    })
  }
}
</script>
